<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>markdown格式转换</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/assert/css/base.css}">
</head>
<body>
  <div class="head">
      <h1 style="top: 30% ;left: 5% ">markdown格式转换</h1>
  </div>
  <div class="body"  >
      <div   style="background: aliceblue ;width: 28%;height: 100%;float: left; border:1px solid  rgba(217,225,224,0.64)">
          <textarea id="param" style="height: 38%;width: 100% ;top: 1px;font-size:150%;border:1px solid  rgba(217,225,224,0.64)" >参数</textarea>
          <textarea id="sourceData" style="height: 60%;width: 100%;font-size:150%;border:1px solid  rgba(217,225,224,0.64)">文档内容</textarea>
      </div>
      <div  style="background: aliceblue;width: 5%;height: 100%;float: left; border:1px solid  rgba(217,225,224,0.64)" >
          <button style=" position: relative; top: 48%;left: 10%; border-radius: 5px; width: 80%;height: 5%" onclick="trans()"> 转换</button>
      </div>
      <div  style="background: aliceblue ;width: 66%;height: 100%;float: left; border:1px solid rgba(217,225,224,0.64)">
          <textarea id="result" style="height: 90%;width: 90%;top:5%;left: 5%;font-size:150%;border:1px solid  rgba(217,225,224,0.64)">转换后的内容</textarea>
      </div>
  </div>
</div>
</body>
<script type="text/javascript"  th:src="@{/assert/js/ajax.js}"></script>
<script>
    function trans() {

        let param=document.getElementById('param').value;
         let paramData= JSON.parse(param);
        let requestData=document.getElementById('sourceData').value;
        let request={'data': window.btoa(requestData),'params': paramData};
        ajax('post','/dataParse/markDownAndJdbcTemplate', (x)=>{
            document.getElementById('result').value=x;
        },request);
    }


</script>
</html>